<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>脚本管理</title>
    <link rel="stylesheet" href="../styles.css">
    <link rel="stylesheet" href="script-management.css">
</head>
<body>
    <div class="container">
        <h1>脚本管理</h1>
        <div class="search-area">
            <div class="search-box">
                <input type="text" placeholder="脚本名称: 请输...">
                <select>
                    <option>脚本类型: 所有类型</option>
                </select>
                <input type="date">
                <input type="date">
                <button class="btn-primary">搜索</button>
            </div>
        </div>
        <div class="script-summary">
            <div>脚本总数: 0 个</div>
            <div class="action-buttons" style="display: flex; justify-content: flex-end; position: relative; top: -25px;">
                <button class="btn-primary" style="margin-right: 10px;" id="deconstructBtn">AI解构脚本</button>
                <button class="btn-primary">AI创建脚本</button>
            </div>
        </div>
        <table>
            <thead>
                <tr>
                    <th>脚本名称</th>
                    <th>创建时间</th>
                    <th>时长(s)</th>
                    <th>分镜数</th>
                    <th>类型</th>
                    <th>场景设置</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr class="empty-data">
                    <td colspan="7">
                        <div class="empty-placeholder">
                            <img src="../../assets/images/empty.png" alt="暂无数据">
                            <span>暂无数据</span>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- 弹窗 -->
    <div id="deconstructModal" class="modal">
        <div class="modal-content" style="max-width: 1200px;">
            <div class="header">
                <h2>脚本解构</h2>
                <span class="close-btn" id="closeModal">×</span>
            </div>

            <div class="duration">时长：0分钟</div>
            <div class="action-links" style="display: flex; align-items: center; white-space: nowrap;">
                <span>本次任务预计消耗0点</span>
                <button class="btn btn-primary" style="margin-left: 15px;">解构脚本</button>
            </div>

            <div class="input-group">
                <label>
                    <input type="radio" name="input-type" value="file">
                    视频文件：
                </label>
                <input type="text" class="input-field" placeholder="请选择视频文件" readonly>
            </div>

            <div class="input-group">
                <label>
                    <input type="radio" name="input-type" value="url" checked>
                    链接提取：
                </label>
                <input type="text" class="input-field" placeholder="请输入视频链接">
            </div>

            <div class="info-box" style="display: flex; justify-content: space-between; align-items: center;">
                <span>总分镜数: 0 总时长: 1.00 秒 实际预估时长: NaN秒</span>
                <button class="btn btn-primary">新增分镜</button>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label><span class="required">*</span>脚本名称：</label>
                    <input type="text" class="input-field" placeholder="请输入">
                </div>
                <div class="form-group" style="display: flex; align-items: center; justify-content: center; gap: 10px;">
                    <label style="margin-top: 8px;"><span class="required">*</span>配音角色：</label>
                    <span>云希</span>
                    <button class="btn btn-default">选择角色</button>
                </div>
                <div class="form-group">
                    <label><span class="required">*</span>配音导出目录：</label>
                    <input type="text" class="input-field" placeholder="请选择">
                </div>
            </div>

            <button class="btn btn-primary">保存脚本</button>
          

            <table>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>分镜名</th>
                        <th>时长(s)</th>
                        <th>景别</th>
                        <th>分镜描述</th>
                        <th>分镜参考</th>
                        <th>文案</th>
                        <th>操作</th>
                    </tr>
                </thead>
            </table>

            <div class="empty-state">
                <img src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-cYHnC94wqzvgjXKXEMMkxluoT9eNRj.png" alt="No data">
                <p>暂无数据</p>
            </div>
        </div>
    </div>

    <script src="script-management.js"></script>
</body>
</html>